<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>learnSVG</title>
</head>

<body>
    <svg width='800' height='800'>
        <!-- 线 -->
        <!-- <line x1='100' y1='100' x2='300' y2='300' stroke='red' stroke-width='10'></line> -->
        <!-- <line x1='100' y1='100' x2='300' y2='300' style='stroke:blue; stroke-width:10;' id='line'></line> -->
        <!-- 矩形 -->
        <!-- <rect x='100' y='100' width='200' height='200' fill='orange'></rect> -->
        <!-- 圆形 -->
        <!-- <circle cx='200' cy='200' r='100' stroke='red' stroke-width='5' fill='orange' filter='url(#blur)'></circle> -->
        <!-- 椭圆 -->
        <!-- <ellipse cx='200' cy='200' rx='100' ry='50' style='stroke:red;stroke-width:5;fill:orange;'></ellipse> -->
        <!-- 过滤器 -->
        <filter id="blur">
            <!-- 设置高斯模糊 -->
            <feGaussianBlur stdDeviation="3" />
        </filter>
        <!-- <circle cx='220' cy='220' r='100' stroke='red' stroke-width='5' fill='orange'></circle> -->
        <!-- 路径 -->
        <path
            d="M 100 100 L 300 100 270 200 130 200 Z M 166 100 L 180 200 M 238 100 L 220 200 M 200 200 A 20 80 25 0 1 145 310 M 183 250 L 250 250 A 50 100 38 0 1 145 380 M 168 283 L 230 310"
            style="stroke:black;fill:none;stroke-width: 5;">
        </path>
    </svg>
    <script>
        // window.line.onclick = function () {
        //     this.style.stroke = 'red';
        // }
    </script>
</body>

</html>